import React, { Component, ComponentClass } from 'react';
import {Block, View} from '@tarojs/components'
import './index.scss'
import {GetRequest,vcmonitor} from "../utils/tools";
import {newHttp} from "../utils/request";
import {PC_REPAY, TARO_ENV, WX_SCAN_COMMON_INFO, WX_SCAN_PAY, GET_OPENID} from "../constants/api";
import {payment} from "../utils/payment.service";
import {PAY_URL} from "./enum";
import {user} from '../utils/user.service';
type PageStateProps = {}
// import VConsole from 'vconsole'

type PageDispatchProps = {
  getSet: any
}

type PageOwnProps = {}

type PageState = {}

type IProps = PageStateProps & PageDispatchProps & PageOwnProps

interface Login {
  props: IProps
}


class PayRoot extends Component {
  state: {
    infoData: any
    uuid: string
    payToken: string
    method?: any
    touuid: string
    productName: string
    sName: string
    type: string
    amount: number
    orderNum: string
    payType: string
    sid: string
    productId: string
    openId: string
  } = {
    openId: '',
    productId: '',
    payType: '',
    sid: '',
    uuid: '',
    method: '',
    payToken: '',
    infoData: {
      amount: 0,
      sName: '微程之家',
      productName: '商品信息'
    },
    productName:'',
    sName:'',
    touuid:'',
    amount:0,
    type:'',
    orderNum: ''
  }

  async UNSAFE_componentWillMount() {
    const {type='',payToken='',uuid='',touuid='',amount,productName,sName, method, payType = '', sid = '', productId = '', openId = ''} =  Taro.getCurrentInstance().router.params
    if(type){
      document.title = '充值'
      if (method === 'recertification') {
        document.title = '付款'
      }
      if(touuid){
        this.setState({
          method,
          productId,
          openId,
          sid,
          payType,
          touuid,
          amount,
          productName,
          sName,
          type,
          uuid,
        })
      }
    }else{
      document.title = '付款'
      if (payToken) {
        const infoData = await newHttp.catchGet(WX_SCAN_COMMON_INFO, {payToken})
        this.setState({
          infoData,
          payToken,
          uuid
        })
      }
    }

  }
  async componentDidShow() {
    // if (TARO_ENV === 'h5') {
    //   const vConsole = new VConsole();
    //   console.log('vConsole', vConsole)
    // }
    vcmonitor(this)
    const {order_num} =  Taro.getCurrentInstance().router.params
    this.setState({orderNum:order_num},()=>{
      if(this.state.orderNum){
        this.goPayPc()
      }
    })
  }
  async goPayPc() {
    const {orderNum} = this.state
    const result = await newHttp.put(PC_REPAY + orderNum)
    if(result){
      payment.payment(result.data.data, false, res => {
        if (process.env.TARO_ENV === 'h5') {
          document.addEventListener('WeixinJSBridgeReady', function () {
            WeixinJSBridge.call('closeWindow');
          }, false);
          WeixinJSBridge.call('closeWindow');
        }
      })
    }
  }
  async goPay() {
    const {payToken, uuid} = this.state
    const result = await newHttp.catchGet(WX_SCAN_PAY, {payToken, uuid});
    if(result){
      payment.payment(JSON.parse(result.payInfo), false, res => {
        if (process.env.TARO_ENV === 'h5') {
          document.addEventListener('WeixinJSBridgeReady', function () {
            WeixinJSBridge.call('closeWindow');
          }, false);
          WeixinJSBridge.call('closeWindow');
        }
      })
    }
  }
  async goRecharge(){
    const {touuid,amount,type,uuid, method,productId, openId, sid} = this.state
    let url
    let params
    if (method === 'recertification'){
      url = PAY_URL[method].url
      params = {payType:'wxpay',amount,touuid, uuid, type}
    } else {
      url = PAY_URL[type].url
      if (type !== 'serviceProductPay') {
        url += uuid
      }
      params = {payType:'wxpay',amount,touuid,productId, openId, sid, uuid}
    }
    const result = await newHttp.catchPost(url, params)
    if(result){
      payment.payment(JSON.parse(result.payCode), false, res => {
        if (process.env.TARO_ENV === 'h5') {
          document.addEventListener('WeixinJSBridgeReady', function () {
            WeixinJSBridge.call('closeWindow');
          }, false);
          WeixinJSBridge.call('closeWindow');
        }
      })
    }
  }
  render() {
    const {infoData,touuid,productName,amount,sName,orderNum} = this.state
    return (
      <View className='pay-root'>
        {!orderNum&&<Block>
          {touuid ?
            <Block>
              <View className='goods-name'>{productName}</View>
              <View className='goods-price'>{amount}</View>
              <View className='price-name'>
                <View className='price-name-left'>收款方</View>
                <View className='price-name-right'>{sName}</View>
              </View>
              <View className='pay-btn' onClick={this.goRecharge.bind(this)}>支付</View>
            </Block>
            :
            <Block>
              <View className='goods-name'>{infoData.productName}</View>
              <View className='goods-price'>{infoData.amount}</View>
              <View className='price-name'>
                <View className='price-name-left'>收款方</View>
                <View className='price-name-right'>{infoData.sName}</View>
              </View>
              <View className='pay-btn' onClick={this.goPay.bind(this)}>支付</View>
            </Block>
          }
        </Block>}

      </View>
    )
  }
}

export default PayRoot as ComponentClass<PageOwnProps, PageState>
